<template>
    <div class="container">
        <a-card style="width: 100%;height: 100%;" title="修改密码">
            <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
                @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
                <a-form-item has-feedback label="请输入旧密码" name="old_password">
                    <a-input v-model:value="formState.old_password" type="password" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="请输入新密码" name="new_password">
                    <a-input v-model:value="formState.new_password" type="password" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="重新输入密码" name="re_password">
                    <a-input v-model:value="formState.re_password" type="password" autocomplete="off" />
                </a-form-item>
                <div style="display: flex;margin-left: 150px;">
                    <a-form-item :wrapper-col="{ span: 14, offset: 5 }" style="margin-left: 5px;">
                        <a-button type="primary" html-type="submit">保存</a-button>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 5 }" style="margin-left: 50px;">
                        <a-button type="primary" @click="router.push({ name: 'personal' })">取消</a-button>
                    </a-form-item>
                </div>
            </a-form>
        </a-card>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { editPwd } from '@api/user.js'
import { message } from 'ant-design-vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const formState = reactive({
    old_password: '',
    new_password: '',
    re_password: '',
})
let validate = async (_rule, value) => {
    if (value === '') {
        return Promise.reject('必填项');
    }
};
const rules = {
    old_password: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    new_password: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    re_password: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
};
const handleFinish = values => {
    editPwd(values).then(res => {
        console.log(res)
        if (res.status === 200) {
            message.success('修改成功')
            router.push({name:'personal'})
        }
    }).catch(err => {
        console.log(err)
        if(err.response.status=== 400){
            if(err.response.data.hasOwnProperty('old_password')||err.response.data.hasOwnProperty('new_password')||err.response.data.hasOwnProperty('re_password')){
                message.error('密码不得少于三个字符')
            }else{
                message.error(err.response.data)
            }
        }
    })

};
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
    height: calc(100vh - 65px);

    ::v-deep .ant-card-body {
        width: 500px;
    }

    ::v-deep .ant-card-head {
        background-color: #cfcfd1;
    }

    ::v-deep .ant-card-head-title {
        font-weight: bold;
    }
}
</style>